<template>
    <div class="qrCodeTemplate">
                <div :class="[{'left':pageDetails.qr_type != 2},{'right':pageDetails.qr_type == 2}]">
                    <div class="templateName" v-if="type == 'index'">
                        <el-radio v-model="radioNumber" :label="pageDetails.qr_type" @change="radioChange">打印{{pageDetails.tempName}}</el-radio>
                    </div>
                    <div class="templateMain" v-if="index == 1">
                        <div class="qrCodeBg">
                            <img :src="require('@/assets/images/qrcode.jpg')" alt="" class="bg">
                            <img v-if="logoIMG != '' && status" :src="logoIMG" class="logo" alt="">
                            <i v-else></i>
                        </div>
                        <div class="info">
                            <div class="title">资产名称：</div>
                            <div class="titleText">{{pageDetails.title}}</div>
                            <div class="title">资产编码：</div>
                            <div class="titleText">{{pageDetails.number}}</div>
                        </div>
                    </div>
                    <div class="templateMain" v-if="index == 2">
                        <div class="qrCodeBg">
                            <img v-if="logoIMG != '' && status" :src="logoIMG" alt="">
                            <i v-else></i>
                        </div>
                        <div class="info">
                            <div class="title">资产名称：</div>
                            <div class="titleText">{{pageDetails.title}}</div>
                            <div class="title">资产编码：</div>
                            <div class="titleText">{{pageDetails.number}}</div>
                        </div>
                    </div>
                    <div class="text" v-if="type == 'index'">尺寸：{{pageDetails.size}}</div>
                    <div v-else>
                        <div class="text">模板名称：{{pageDetails.tempName}}</div>
                        <div class="text">二维码尺寸：{{pageDetails.size}}</div>
                        <div class="text">在 [设置二维码打印样式] 里面更换模板</div>
                    </div>
                </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                pageDetails:{},
                radioNumber:''
            }
        },
        created(){
           this.pageDetails = this.$store.state.qrCodeTpData[this.index]
           this.radioNumber = this.radioVal
        },
        props:{
            type:String,
            logoIMG:{
                type:String,
                default:''
            },
            index:{
                type:String,
                default:''
            },
            radioVal:{
                type:String,
                default:''
            },
            status:{
                type:Boolean,
                default:false
            },
        },
        watch:{
            radioVal (newData,old) {
                this.radioNumber = newData
            }
        },
        methods:{
            radioChange(val){
                this.$emit('change',val+'')
            }
        }
    }
</script>

<style lang="scss">
.qrCodeTemplate{
    .left{
        .templateName,.el-radio{
            display: flex !important;
            align-items: center !important;
            height: 24px !important;
            .el-radio__inner{
                width:22px !important;
                height:22px !important;
                border:2px solid #5677fc!important;
                background: #fff!important;
                &::after{
                    width:12px !important;
                    height:12px !important;
                    background:#5677fc !important;
                }
            }
            .el-radio__label{
                color: rgba(16, 16, 16, 1);
                font-size: 15px;
                font-weight: 600;
                padding-bottom: 2px;
            }
        }
        .templateMain{
            background:#fff;
            margin:19px 0 0 33px;
            padding: 14px 15px;
            border: 1px solid rgba(187, 187, 187, .8);
            width: calc(255px - 30px);
            height: calc(126px - 28px);
            display: flex;
            // align-items: center;
            .qrCodeBg{
                width: 99px;
                height: 99px;
                display: flex;
                justify-content:center;
                align-items: center;
                position: relative;
                .bg{
                    width: 99px;
                    height: 99px;
                    display: block
                }
                .logo{
                    position: absolute;
                    left:50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    display: block;
                    width: 28px;
                    height: 28px;
                    border-radius: 10px;
                    border: 2px solid rgba(255, 255, 255, 1);
                    background-color: #fff;
                }
                i{
                    position: absolute;
                    left:50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    display: block;
                    width: 28px;
                    height: 28px;
                    border-radius: 10px;
                    background-color: rgba(142, 142, 142, 1);
                    border: 2px solid rgba(255, 255, 255, 1);
                }
            }
            .info{
                width: 100%;
                overflow: hidden;
                padding: 1px 0 0 10px;
                .title,.titleText{
                    height: 18px;
                    line-height: 18px;
                    font-size: 12px;
                    color:#8E8E8E;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .title{
                    margin-bottom: 3px;
                }
                .title:nth-child(3){
                    margin-top: 12px;
                }
                .titleText{
                    font-size: 12px;
                    color:#000;
                }
            }
        }
        .text{
            color: #5E5E5E;
            font-size: 12px;
            margin:15px 0 0 33px;
            letter-spacing: 1px;
        }
    }
    .right{
        .templateName,.el-radio{
            display: flex !important;
            align-items: center !important;
            height: 24px !important;
            .el-radio__inner{
                width:22px !important;
                height:22px !important;
                border:2px solid #5677fc!important;
                background: #fff!important;
                &::after{
                    width:12px !important;
                    height:12px !important;
                    background:#5677fc !important;
                }
            }
            .el-radio__label{
                color: rgba(16, 16, 16, 1);
                font-size: 15px;
                font-weight: 600;
                padding-bottom: 2px;
            }
        }
        .templateMain{
            background:#fff;
            margin:19px 0 0 33px;
            border: 1px solid rgba(187, 187, 187, .8);
            padding: 15px 16px;
            width: calc(240px - 32px);
            height: calc(111px - 30px);
            display: flex;
            .qrCodeBg{
                flex-shrink: 0;
                width: 84px;
                height: 84px;
                display: flex;
                justify-content:center;
                align-items: center;
                background-image:url('~@/assets/images/qrcode.jpg');
                background-repeat: no-repeat;
                background-size:84px 84px;
                img{
                    display: block;
                    width: 24px;
                    height: 24px;
                    border-radius: 10px;
                    border: 2px solid rgba(255, 255, 255, 1);
                }
                i{
                    display: block;
                    width: 24px;
                    height: 24px;
                    border-radius: 10px;
                    background-color: rgba(142, 142, 142, 1);
                    border: 2px solid rgba(255, 255, 255, 1);
                }
            }
            .info{
                width: 100%;
                overflow: hidden;
                padding: 1px 0 0 10px;
                .title,.titleText{
                    height: 17px;
                    line-height: 17px;
                    font-size: 12px;
                    color:#8E8E8E;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .title{
                    margin-bottom: 3px;
                }
                .title:nth-child(3){
                    margin-top: 7px;
                }
                .titleText{
                    font-size: 12px;
                    color:#000;
                }
            }
        }
        .text{
            color: #5E5E5E;
            font-size: 12px;
            margin:15px 0 0 33px;
            letter-spacing: 1px;
        }
    }
    // .templateMain{
    //     background:#fff;
    //     margin:19px 0 0 23px;
    //     border: 1px solid rgba(187, 187, 187, .8);
    //     padding: 16px 17px;
    //     display: flex;
    //     .qrCodeBg{
    //         flex-shrink: 0;
    //         width: 179px;
    //         height: 179px;
    //         display: flex;
    //         justify-content:center;
    //         align-items: center;
    //         background-image:url('~@/assets/images/qrcode.jpg');
    //         background-repeat: no-repeat;
    //         background-size:179px 179px;
    //         i{
    //             display: block;
    //             width: 50px;
    //             height: 50px;
    //             border-radius: 10px;
    //             background-color: rgba(142, 142, 142, 1);
    //             border: 2px solid rgba(255, 255, 255, 1);
    //         }
    //     }
    //     .info{
    //         width: 100%;
    //         overflow: hidden;
    //         padding: 5px 0 0 10px;
    //         .title,.titleText{
    //             height: 15px;
    //             line-height: 15px;
    //             font-size: 20px;
    //             color:#8E8E8E;
    //             overflow: hidden;
    //             text-overflow: ellipsis;
    //             white-space: nowrap;
    //         }
    //         .title{
    //             // margin-bottom: 3px;
    //         }
    //         .title:nth-child(3){
    //             // margin-top: 15px;
    //         }
    //         .titleText{
    //             color:#000;
    //         }
    //     }
    // }
}
</style>